<template>
    <!-- 染色看板数据 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%;padding: 20px;box-sizing: border-box;" id="workshopCancelStocks">
            <a-row class="w-header" align="center">
                <a-col :span="21" style="text-align: center;font-weight: bold;font-size: 20px;">
                    B车间
                </a-col>
                <a-col :span="3">
                    {{ dayTime }}
                </a-col>
            </a-row>
            <a-row style="padding: 10px 0px 10px 50px;">
                <a-col :span="3">
                    正在生产的设备: 1000
                </a-col>
                <a-col :span="3">
                    流转卡合计行数: 1000
                </a-col>
                <a-col :span="3">
                    闲置设备行数: 1000
                </a-col>
            </a-row>
            <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady" style="height:85%" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                    :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                    @columnResized="onColumnResized" @columnMoved="onColumnMoved" />
            </a-spin>
            <!-- <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
                @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                :page-size="pagination.pageSize" :current="pagination.page" /> -->
        </div>
    </div>
</template>

<script  lang="ts">

import emitter from "@/hooks/useEventBus";
import { localeText } from '@/api/aggridZw'
import { onMounted, reactive, ref } from 'vue';
import { usePagination, useTable } from '@/hooks/table';
import { dataBorandInfo } from '@/api/DyeingshopManagement/boarndInfo';
import { Message } from '@arco-design/web-vue';
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
    name: 'dyeBoardData',
    components: {  },
    setup() {
        const pageLoading = ref(false)
        const table = useTable();
        const borandInfoApi = dataBorandInfo();
        const doRefresh = async () => {
            pageLoading.value = true
            updateGridState01()
            let res: any = await borandInfoApi.getBorandList({ workshop: '', section: '' });
            if (res.code === 200) {
                table.handleSuccess(res.data);
                gridOption.value.setRowData(res.data);
            } else {
                Message.error({
                    content: res.message,
                    duration: 2000
                });
            }
            pageLoading.value = false
        };
        const pagination = usePagination(doRefresh);
        //表格方面
        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            colState.value = params.columnApi
            //调整表格自适应大小
        }

        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
        };
        let cfsValue: any = [
            {
                headerName: "染缸设备编号",
                field: "device",
            },
            {
                headerName: "流转卡号",
                field: "",
            },
            {
                headerName: "缸型",
                field: "cylinderType",
            },
            {
                headerName: "管型",
                field: "tubeType",
            },
            {
                headerName: "染色计划出缸时间",
                field: "",
            },
            {
                headerName: "染色计划开始时间",
                field: "",
            },
            {
                headerName: "当前工序",
                field: "process",
            },
            {
                headerName: "工段",
                field: "section",
            },
            {
                headerName: "染部收单时间",
                field: "",
            },
            {
                headerName: "前处理工序",
                field: "firstProcess",
            },
            {
                headerName: "开卡日期",
                field: "createOrderDate",
            },
            {
                headerName: "加急类别",
                field: "",
            },
            {
                headerName: "拼缸缸号",
                field: "togetherSchedule",
            },
        ];
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const localeTextData: any = ref(localeText);

        const dayTime = ref('');

        const nowTimeStr = () => {
            const date = new Date();
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const h = date.getHours().toString().padStart(2, '0');
            const m = date.getMinutes().toString().padStart(2, '0');
            const s = date.getSeconds().toString().padStart(2, '0');
            dayTime.value = year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s;
            setTimeout(() => { nowTimeStr() }, 1000);
        };
        nowTimeStr();

        onMounted(() => {
            doRefresh();
            emitter.on("dyeBoardData", () => {
                doRefresh();
            });
        });

        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('dyeBoardData01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            pageLoading,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagination,
            table,
            localeTextData,
            changePage,
            changeSize,
            total,
            cfsValue,
            defaultColDef,
            gridReady,
            dayTime
        }
    }
}
</script>

<style scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.w-header {
    padding: 5px 0px;
    background-color: rgb(238, 246, 255);
}
</style>